import { createRef, type ComponentProps } from 'react';
import { Modal as AntModal } from 'antd';

const containerRef = createRef<any>();

export const ModalRoot = () => {
    return <div data-large-screen-modal ref={containerRef} style={{ position: 'absolute', left: 0, top: 0 }} />;
};

export const useModalRootRef = () => {
    return containerRef;
};

export const Modal = (props: ComponentProps<typeof AntModal>) => {
    return <AntModal {...props} getContainer={() => containerRef.current ?? document.body} />;
};
